<template>
  <div class="add-email">
    <div class="main">
      <div class="list-herder">
        <el-page-header @back="goBack" :content="title"> </el-page-header>
      </div>
      <el-form
        ref="form"
        :model="Form"
        label-width="80px"
        label-position="top"
        inline
      >
        <el-form-item label="账号">
          <el-select
            v-model="Form.type"
            placeholder="请选择邮件类型"
            @change="$forceUpdate()"
          >
            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in acType"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模板">
          <el-select
            v-model="Form.state"
            placeholder="--请选择邮件模板--"
            @change="$forceUpdate()"
          >
            <el-option
              :label="item"
              :value="index"
              v-for="(item, index) in resType"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主题" class="theme">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="Form.set"
            :maxlength="500"
            :autosize="{ minRows: 2, maxRows: 5 }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="接收人" class="linkmanren">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="例如：33445566@qq.com|雷军"
            v-model="Form.result"
            :autosize="{ minRows: 2, maxRows: 5 }"
            @focus="changeFocus"
            @blur="changeBlur"
          >
          </el-input>
          <div class="linkman-abs" v-if="isTable">
            <adsoluteMember
              @closePop="closePop"
              @addData="addData"
              :clumnData="clumnData"
              :rowData="rowData"
            ></adsoluteMember>
          </div>
        </el-form-item>
      </el-form>
      <div class="rich-text">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
          style="height: 500px; overflow-y: hidden"
          v-model="html"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
          @onChange="onChange"
        />
      </div>
      <can_save @saveData="saveData" @cancelData="cancelData"></can_save>
    </div>
  </div>
</template>
<script>
import can_save from "../../components/components_wxq/can_save.vue";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import adsoluteMember from "../../components/components_wxq/adsoluteMember.vue";
import storage from "../../utils/storage";

export default {
  name: "addEmailMark",
  components: {
    can_save,
    Editor,
    Toolbar,
    adsoluteMember,
  },
  data() {
    return {
      Form: {
        id: null,
        accountId: 0,
        adminId: 0,
        content: "",
        recipients: "",
        templateId: 0,
        theme: "",
      },
      clumnData: [
        { name: "title", lable: "标题", width: 100 },
        { name: "date", lable: "发布时间", width: 200 },
        { name: "num", lable: "成员", width: 100 },
        { name: "state", lable: "状态", width: 100 },
      ],
      rowData: [
        {
          type: 0,
          title: "2we",
          date: "2022-04-30 11:01",
          num: 4,
          state: 1,
          text: "sdfasffd",
        },
        {
          type: 0,
          title: "2we",
          date: "2022-04-30 11:01",
          num: 4,
          state: 1,
          text: "sdfasffd",
        },
        {
          type: 1,
          title: "2we",
          date: "2022-04-30 11:01",
          num: 4,
          state: 0,
          text: "sdfasffd",
        },
        {
          type: 1,
          title: "2we",
          date: "2022-04-30 11:01",
          num: 4,
          state: 0,
          text: "sdfasffd",
        },
        {
          type: 0,
          title: "2we",
          date: "2022-04-30 11:01",
          num: 4,
          state: 1,
          text: "sdfasffd",
        },
      ],
      acType: ["客户询问信", "新品推荐信"],
      resType: ["问候信", "感谢信", "推荐信"],
      title: "",
      editor: null,
      html: "",
      toolbarConfig: {},
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
      isTable: false,
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    cancelData() {
      this.$router.push("/home/market/emailMark");
    },
    saveData() {
      this.$router.go(-1);
    },
    changeFocus() {
      this.isTable = true;
    },
    closePop() {
      this.isTable = false;
    },
    changeBlur() {
      this.isTable = false;
    },
    //添加联系人
    addData(obj) {
      console.log(obj);
      this.isTable = false;
    },

    //富文本事件
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onChange(editor) {
      this.Form.title = editor.getText();
    },
    //刷新缓存
    breakPage(e) {
      storage.setStorage("title", this.title);
    },
  },
  computed: {},
  watch: {},
  created() {
    window.addEventListener("beforeunload", (e) => this.breakPage(e));
    this.title = sessionStorage.getItem("title") || this.$route.params.H;
  },
  beforeDestroy() {
    window.removeEventListener("beforeunload", (e) => this.breakPage(e));
    storage.removeStorage("title");
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>
<style lang="less" scoped>
.add-email {
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;

  .main {
    width: 100%;
    background-color: #fff;
    padding: 20px 0;
    border-radius: 8px 8px 0 0;
  }
  .list-herder {
    padding: 0 20px 10px;
  }
  .el-form {
    width: 100%;
    padding: 20px 20px 10px;
    box-sizing: border-box;
    .el-form-item {
      width: 50%;
      margin-right: 0;
      margin-bottom: 8px;
      padding: 0 12px;
      box-sizing: border-box;
      vertical-align: none;
    }
    .theme {
      width: 100%;
    }
    .linkmanren {
      position: relative;
      width: 100%;

      .linkman-abs {
        width: 100%;
        position: absolute;
        z-index: 1000;
        top: 60px;
        left: 0;
        box-shadow: 0px 16px 14px 6px rgba(141, 141, 141, 0.1);
      }
    }
    .el-select {
      width: 100%;
    }
    .el-select /deep/ .el-input {
      width: 100% !important;
      height: 36px !important;
    }
  }
  .rich-text {
    padding: 20px;
    border-bottom: 1px solid #e5dfd3;
  }
  .el-form-item /deep/ .el-form-item__label {
    padding: 0 !important;
  }
}
</style>
